圖片延遲載入已不是什麼新技術，而那天因為wp super cache一直秀斗，手機與桌機版版型傻傻分不清楚，以及使用手機瀏覽時，卻出現電腦版，這讓網站在Google搜尋時，出現此網站不適合使用手機瀏覽，才讓梅干更換成wp rocket這套快取外掛，同時wp rocket這套快取功能相當的強大，同時內建就有圖片延遲載入的功能，因此梅干就好奇，將它開啟沒想到網站開啟速度竟然秒快，讓梅干對圖片延遲載入有了不一樣的感受。
由於wp rocket則是將WordPress的所有img圖片標籤，會全面套用圖片延遲載入的效果，這也因此讓梅干先前所用的，使用前與使用後的效果立即失效，甚至就連滑入顯示原圖的特效也一樣，所以那一天梅干就研究了一下圖片延遲載入的作法，再將它加入排除的功能，讓有些圖片可以不要套用延遲載入，最後再花了點時間，將它寫成了WordPress的外掛，因此有需要的朋友，現在也一塊來看看吧！
一般而言，我們經常會在網頁上，放上大量圖片來吸引讀者瀏覽
但是當圖片檔案太多、太大都會影響網頁載入的速度
這時候我們可以使用圖片延遲下載的技巧
來降低第一時間載入的圖片量
下面要介紹的是JQuery的套件 "Lazy Load"
這個套件主要用來延遲圖片下載 (碎碎念：廢話，不然用它幹啥!!)
讓網頁第一時間先把其它文字、html標籤…等其他訊息載入完畢後
再開始載入圖片
優點：
A. 增加網頁瀏覽效能
B. 優化使用者體驗(使用者不會因為網頁的loading覺得網頁壞掉)
缺點：
A. 程式工作增加
接下來就看看怎麼寫吧!!
首先一樣引用JQuery的JS
然後引用lazyload的JS檔
(官方連結：http://www.appelsiini.net/projects/lazyload)
這邊開始才是重點，下面程式呼叫lazyload出來用
最後所有的圖片引用都必須改寫
原始圖片載入寫法：
(這邊加入尺寸的原因可以參考這篇 網頁效能優化-圖片篇)
修改後延遲圖片載入寫法：
差別在於：
1. src 拿掉，改成 data-original
2. class 需要新增一個 lazyload
另外有些人可能需要修改自己專屬的loading圖片
只需要打開jquery.lazyload.js檔案
然後找到 placeholder :"loading圖片網址" ，在這裡做修改就可以了
特別注意的是，延遲圖片下載的美意是為了減少網頁第一時間的loading，所以千萬不要為了花俏，去做了一個檔案很大的loading的圖片，那就失去使用這功能的意義了